<template>
  <el-dialog
    id="mailDetail"
    :visible.sync="detailVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :modal="false"
    :show-close="false"
    v-if="detailVisible"
    title="微邮详情"
    width="1250px"
    top="0"
    custom-class="mailDetail"
    append-to-body
  >
    <div
      v-if="detailVisible"
      class="detailMask"
      style="position: fixed;top:0;left:0;right:0;bottom:0;opacity: .5;background: #000;z-index: -1"
    />
    <el-card
      class="box-card"
      shadow="never"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>
          {{ mailData.zt }}
          <i
            v-if="mailData.bm"
            class="jeicon jeicon-the-lock"
            style="font-size: 12px;"
          />
        </span>
        <div
          v-if="mailData.fjrId === getCurrentUserId"
          class="floatBtns"
        >
          <el-button
            @click="editMails"
            type="text"
          >
            {{ $t('m.weiyou_modification') }}
          </el-button>
          <el-button
            @click="deleteMails"
            type="text"
          >
            {{ $t('m.weiyou_delete') }}
          </el-button>
        </div>
      </div>

      <div
        v-if="isCollepse"
        class="gatherInfo"
      >
        <div class="basicInfo">
          {{ mailData.fjr }} 于
          <span class="time">{{ mailData.updateTime }} 发送给 </span>
          <span v-html="getRecieveUserName" />
        </div>
        <div class="openBtn">
          <el-button
            @click="isCollepse = !isCollepse"
            type="text"
          >
            完整信息<i class="jeicon jeicon-arrow-down-two" />
          </el-button>
        </div>
      </div>

      <div v-if="!isCollepse">
        <div class="card-item">
          <div class="item-label">
            {{ $t('m.weiyou_addresser') }}:
          </div>
          <div class="item-note">
            {{ mailData.fjr }}
          </div>
        </div>
        <div class="card-item">
          <div class="item-label">
            {{ $t('m.weiyou_time') }}:
          </div>
          <div class="item-note">
            {{ mailData.updateTime }}
          </div>
        </div>
        <div class="card-item">
          <div class="item-label">
            {{ $t('m.weiyou_recipients') }}:
          </div>
          <div class="item-note">
            <div
              v-html="getRecieveUserName"
              style="max-width: 1020px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
            />
            <el-button
              @click="isCollepse = !isCollepse"
              type="text"
              class="hideBtn"
            >
              收起<i class="jeicon jeicon-arrow-up-two" />
            </el-button>
            <el-button
              @click="openUserDialog"
              class="moreBtn"
              type="text"
              icon="jeicon jeicon-more"
            />
          </div>
          <user-names
            ref="namesDialog"
            :userMap="recieverMap"
            :selectedIdList="selectUsersId"
            :showType="'detail'"
          />
        </div>
      </div>
    </el-card>

    <div
      id="waterContent"
      @contextmenu="preventRight($event)"
      v-html="mailData.zw"
      class="mail-cnt"
    />

    <div
      v-if="mailDetail.funcName && mailDetail.modelName"
      class="module-mail"
    >
      <span
        @click="openFunc"
        class="moduleName"
      >{{ `${mailDetail.funcName}: ${mailDetail.modelName}` }}</span>
    </div>

    <div
      v-if="filesList.length > 0"
      class="file-list"
    >
      <div class="file-title">
        <i class="jeicon jeicon-attachment-o" />
        {{ $t('m.weiyou_accessory') }} ({{ filesList.length }})
      </div>
      <div
        v-for="(item, index) in filesList"
        :key="index"
        class="file-item"
      >
        <span style="float: left">
          <i
            v-if="item.fileType == 'excel'"
            class="slImg jeicon jeicon-excel"
            style="color: rgb(0, 132, 62);"
          />
          <i
            v-else-if="item.fileType == '图片'"
            class="slImg jeicon jeicon-image"
            style="color: rgb(255, 119, 68);"
          />
          <i
            v-else-if="item.fileType == 'word'"
            class="slImg jeicon jeicon-word"
            style="color: rgb(0, 87, 170);"
          />
          <i
            v-else-if="item.fileType == '文本'"
            class="slImg jeicon jeicon-txt"
            style="color: rgb(43, 162, 68);"
          />
          <i
            v-else-if="item.fileType == 'pdf'"
            class="slImg jeicon jeicon-pdf"
            style="color: rgb(229, 44, 14);"
          />
          <i
            v-else-if="item.fileType == 'ppt'"
            class="slImg jeicon jeicon-ppt"
            style="color: rgb(243, 78, 25);"
          />
          <i
            v-else-if="item.fileType == '压缩包'"
            class="slImg jeicon jeicon-zip"
            style="color: rgb(251, 175, 50);"
          />
          <i
            v-else
            class="slImg jeicon jeicon-unknownfile"
          />
        </span>

        <div
          :title="item.name"
          class="fileName"
        >
          {{ item.name }}
        </div>
        <div class="handleIcon">
          <el-button
            @click="downloadFile(item)"
            type="text"
          >
            {{ $t('m.weiyou_download') }}
          </el-button>
          <el-button
            @click="previewFile(item)"
            type="text"
            style="margin-left:30px"
          >
            {{ $t('m.weiyou_preview') }}
          </el-button>
        </div>
      </div>
    </div>

    <div class="footerBox">
      <span
        @click="openzanUserlist()"
        style="margin-right: 70px;"
      >{{ $t('m.weiyou_like') }} {{ Number(mailData.dzNum) }}</span>
      <span @click="openyueUserlist()">{{ $t('m.weiyou_read') }} {{ mailData.yyNum }}/{{ mailData.yyTotalNum }}</span>
    </div>

    <zan-user-list
      ref="zanuserlist"
      :mailObj="mailDetail"
    />
    <yue-user-list
      ref="yueuserlist"
      :mailObj="mailDetail"
    />

    <div
      v-if="commentList.length > 0"
      class="commnetTitle"
    >
      <span class="verticalBar" />
      {{ $t('m.weiyou_comments') }}
    </div>

    <div
      v-if="commentList.length > 0"
      class="comment-list"
    >
      <comment-item
        v-for="(item, index) in commentList"
        :key="index"
        :commentItem="item"
        @updatePhoto="updatePhoto"
      >
        <template #replayBtn>
          <el-button
            v-if="mailData.kftl && item.plrId != getCurrentUserId"
            @click="replyComment(item)"
            type="text"
            icon="jeicon jeicon-message"
          >
            {{ $t('m.weiyou_reply') }}
          </el-button>
          <el-button
            v-if="item.plrId == getCurrentUserId"
            @click="deleteComment(item,index)"
            type="text"
            icon="jeicon jeicon-trash-o"
          >
            {{ $t('m.weiyou_delete') }}
          </el-button>
        </template>
      </comment-item>
    </div>

    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        v-if="mailData.kftl"
        @click="openInputModal"
        size="small"
        type="primary"
      >
        {{ $t('m.weiyou_sendcomment') }}
      </el-button>
      <el-button
        @click="closeDetail"
        size="small"
      >
        {{ $t('m.weiyou_close') }}
      </el-button>
    </div>
    <input-modal
      ref="inputModal"
      @sendComment="sendComment"
    >
      <template #handleIconBtns>
        <div class="uploadTip">
          {{ $t('m.weiyou_requirements') }}
        </div>
        <div>
          <el-button
            @click.stop.prevent="selectImage"
            type="text"
            icon="jeicon jeicon-attachment-o"
            class="fbBtns"
          >
            {{ $t('m.weiyou_accessory') }}
          </el-button>
          <el-button
            ref="emojiButton"
            @click.stop.prevent="showEmojis"
            type="text"
            icon="jeicon jeicon-smile"
            class="fbBtns"
          >
            {{ $t('m.weiyou_emoji') }}
          </el-button>
          <je-emoji-popover
            :visible="visibleMailEmoji"
            :trigger-el="triggerElement"
            :placement="'top-start'"
            @select="selectEmojis"
          />
        </div>

        <el-row
          :gutter="20"
          v-if="getFileList.length > 0"
        >
          <el-col
            :span="6"
            v-for="(item, index) in getFileList"
            :key="index"
          >
            <div class="grid-content">
              <span>
                <i
                  v-if="item.fileType == 'excel'"
                  class="slImg jeicon jeicon-excel"
                  style="color: rgb(0, 132, 62);"
                />
                <i
                  v-else-if="item.fileType == '图片'"
                  class="slImg jeicon jeicon-image"
                  style="color: rgb(255, 119, 68);"
                />
                <i
                  v-else-if="item.fileType == 'word'"
                  class="slImg jeicon jeicon-word"
                  style="color: rgb(0, 87, 170);"
                />
                <i
                  v-else-if="item.fileType == '文本'"
                  class="slImg jeicon jeicon-txt"
                  style="color: rgb(43, 162, 68);"
                />
                <i
                  v-else-if="item.fileType == 'pdf'"
                  class="slImg jeicon jeicon-pdf"
                  style="color: rgb(229, 44, 14);"
                />
                <i
                  v-else-if="item.fileType == 'ppt'"
                  class="slImg jeicon jeicon-ppt"
                  style="color: rgb(243, 78, 25);"
                />
                <i
                  v-else-if="item.fileType == '压缩包'"
                  class="slImg jeicon jeicon-zip"
                  style="color: rgb(251, 175, 50);"
                />
                <i
                  v-else
                  class="slImg jeicon jeicon-unknownfile"
                />
              </span>

              <div
                :title="item.name"
                class="fileName"
              >
                {{ item.name }}
              </div>
              <div class="deleteIcon">
                <i
                  @click="deleteFile(item,index)"
                  class="jeicon jeicon-trash-o"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </template>
    </input-modal>
    <create-mail
      ref="editMail"
      :handleType="'edit'"
      :mailCnt="mailData"
      :mailObj="mailDetail"
      @doCreate="doCreate"
    />
  </el-dialog>
</template>
<script>
import JEEmojiPopover from '../../../components/emoji/index.vue';
import CommentItem from './comment_item';
import ZanUserList from './zanUserList';
import YueUserList from './yueUserList';
import CreateMail from './create';
import UserNames from './userNamesDialog';
import InputModal from '../../../components/inputModal/inputModal';
import {
  getMailDetail,
  getCommentList,
  deleteMyMail,
  commentMail,
  deleteComment,
  addReadMicromail,
} from '../actions/actions';
import watermark from '../util/util';
import returnMsg from '../assets/lang/speNationalList';

import getMaxZindex from '../util/getZindex';

export default {
  name: 'MailDetail',
  components: {
    'je-emoji-popover': JEEmojiPopover, CommentItem, ZanUserList, YueUserList, CreateMail, UserNames, InputModal,
  },
  props: {
    mailDetail: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      detailVisible: false,
      mailData: {},
      filesList: [],
      commentFiles: [],
      visibleMailEmoji: false,
      triggerElement: '',
      fileCountLimit: 6,
      commentList: [],
      langLocal: '', // 本地语言
      hfrName: '',
      hfrId: '',
      parentId: '',
      recieverMap: {},
      selectUsersId: [],
      nameArr: [],
      isCollepse: true,
    };
  },
  computed: {
    // 处理附件列表
    getFileList() {
      this.commentFiles.forEach((item, index) => {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.commentFiles[index].pathKey = item.url;
        const postfix = item.name.substring(item.name.lastIndexOf('.') + 1, item.name.length).toLowerCase();

        switch (postfix) {
          case 'jpg': case 'jpeg': case 'png': case 'gif': case 'bmp': case 'psd': case 'tiff':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.commentFiles[index].fileType = '图片';
            break;
          case 'txt':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.commentFiles[index].fileType = '文本';
            break;
          case 'doc': case 'docx':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.commentFiles[index].fileType = 'word';
            break;
          case 'xls': case 'xlsx':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.commentFiles[index].fileType = 'excel';
            break;
          case 'pdf':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.commentFiles[index].fileType = 'pdf';
            break;
          case 'zip': case 'rar': case 'cab': case 'iso': case 'jar': case 'ace': case '7z': case 'tar': case 'gz': case 'arj':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.commentFiles[index].fileType = '压缩包';
            break;
          case 'ppt': case 'pptx':
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.commentFiles[index].fileType = 'ppt';
            break;
          default:
            break;
        }
      });
      return this.commentFiles;
    },
    // 处理收件人名字显示
    getRecieveUserName() {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.nameArr = [];
      let userArr = [];
      Object.keys(this.recieverMap).forEach((item) => {
        if (this.recieverMap[item].sfszsr) {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.recieverMap[item].resName = `${this.recieverMap[item].name} <span style="color: #999"> (主送人)</span>`;
        }
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        userArr.push(this.recieverMap[item]);
      });
      userArr = this.arraySort(userArr);
      userArr.forEach((item) => {
        if (item.sfszsr) {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.nameArr.push(item.resName);
        } else {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.nameArr.push(item.name);
        }
      });
      return this.nameArr.join('，');
    },
    // 获取当前用户 id
    getCurrentUserId() {
      return JE.currentUser.userId;
    },
  },
  watch: {
    detailVisible(nv) {
      if (nv) {
        this.$nextTick(() => {
          setTimeout(() => {
            $('#mailDetail .el-dialog__body').css({ height: `${document.getElementById('mailDetail').offsetHeight - 115}px` });

            this.filesList = [];
            this.nameArr = [];
            this.commentFiles = [];
            this.fileCountLimit = 6;
            this.hfrId = '';
            this.hfrName = '';
            this.parentId = '';
            this.recieverMap = {};
            this.isCollepse = true;

            // 处理展示层级
            $('#mailDetail').css({ 'z-index': getMaxZindex() + 2 });
            $('.el-dropdown-menu').css({ 'z-index': getMaxZindex() + 3 });

            // 点击弹窗关闭  表情弹出框
            document.getElementById('mailDetail').onclick = (e) => {
              e.stopPropagation();
              e.preventDefault();
              this.visibleMailEmoji = false;
            };

            // 初始化
            this.initDetail();
          });
        });
      }
    },
  },
  mounted() {
    this.langLocal = JE.getLocalLang('sys.cooperation');
  },
  methods: {
    updatePhoto() {
      this.initDetail();
    },
    openFunc() {
      JE.showFunc(this.mailDetail.funcCode, { type: 'form', id: this.mailDetail.modelId });
    },
    // 关闭 设置已读
    closeDetail() {
      this.detailVisible = false;
      this.$emit('setReaded');
    },
    // 打开评论框
    openInputModal() {
      this.$refs.inputModal.isShowModal = true;
    },
    // 有水印 阻止右键事件
    preventRight(e) {
      if (this.mailData.sy) {
        e.preventDefault();
      }
    },
    // 打开全部收件人
    openUserDialog() {
      this.$refs.namesDialog.checkedUserVisible = true;
    },
    // 根据 order字段 排序
    arraySort(arr) {
      const field = 'order';
      arr.sort((a, b) => {
        if (a[field] < b[field]) {
          return -1;
        }
        if (a[field] > b[field]) {
          return 1;
        }
        return 0;
      });
      return arr;
    },
    // 初始化获取详情   以及置为已读
    initDetail() {
      // 置为已读
      addReadMicromail({ id: this.mailDetail.id, type: '1' });
      // this.$emit('doCreate');

      this.getDetail();
      // 获取评论列表
      getCommentList({ id: this.mailDetail.id, limit: -1 }).then((data) => {
        this.commentList = data.rows;
      });
    },
    // 修改结束  重新刷新一下 详情
    doCreate() {
      this.getDetail();
    },
    // 获取微邮详情
    getDetail() {
      // 获取微邮详情
      getMailDetail({ id: this.mailDetail.id }).then((data) => {
        if (data.success) {
          this.mailData = data.micromail;
          this.filesList = this.mailData.file;
          this.recieverMap = this.mailData.sjr;
          this.selectUsersId = Object.keys(this.recieverMap);
          // 是否展示水印
          if (this.mailData.sy) {
            const curDate = new Date();
            const curTime = `${curDate.getFullYear()}-${curDate.getMonth() + 1}-${curDate.getDate()} ${curDate.getHours()}:${curDate.getMinutes()}`;
            watermark.set(curTime, JE.currentUser.username, 'waterContent', 'add');
            $('#waterContent').css({
              '-moz-user-select': 'none',
              '-webkit-user-select': 'none',
              '-ms-user-select': 'none',
              '-khtml-user-select': 'none',
              '-o-user-select': 'none',
              'user-select': 'none',
            });
          }
        }
      });
    },

    // 编辑
    editMails() {
      this.$refs.editMail.dialogVisible = true;
    },
    // 删除
    deleteMails() {
      const that = this;
      JE.confirm(that.langLocal.messagesOne, (btn) => {
        if (btn == 'ok') {
          deleteMyMail({ id: that.mailDetail.id }).then((data) => {
            if (data.success) {
              that.$emit('deleteMail');
              JE.msg(data.msg);
              that.detailVisible = false;
            }
          });
        }
      });
    },
    // 打开点赞列表
    openzanUserlist() {
      this.$refs.zanuserlist.zanInnerVisible = true;
    },
    // 打开已阅列表
    openyueUserlist() {
      this.$refs.yueuserlist.yueInnerVisible = true;
    },
    // 展示表情弹窗
    showEmojis() {
      this.visibleMailEmoji = !this.visibleMailEmoji;
      this.triggerElement = this.$refs.emojiButton.$el;
    },
    // 选择表情
    selectEmojis(emoji) {
      this.$refs.inputModal.commentEditor && this.$refs.inputModal.commentEditor.execCommand('insertHtml', `<span>${emoji}</span>`);
    },
    // 选择图片
    selectImage() {
      if (this.commentFiles.length >= 6) {
        JE.msg(returnMsg('已达到最大上传个数，请删除后在进行上传'));
        return false;
      }
      const count = this.fileCountLimit - this.commentFiles.length;
      const me = this;
      JE.uploadFile({
        width: 800,
        height: 500,
        fileTypes: '*',
        fileCount: count, // 最多上传数量
        multiSelect: true,
        uploadFileType: 'func',
        post_params: { uploadType: 'OTHER' },
        callback(file, data) {
          if (data.success) {
            me.commentFiles.push(file);
          } else {
            JE.msg(data.message);
          }
        },
      });
    },
    // 点击发song
    sendComment(cont) {
      const zw = cont;
      const params = {
        id: this.mailDetail.id,
        hfr: this.hfrName,
        hfrId: this.hfrId,
        file: JSON.stringify(this.getFileList),
        zw: zw.includes(`@${this.hfrName}`) ? zw.substring(zw.indexOf(this.hfrName) + this.hfrName.length, zw.length) : zw,
        fileId: this.parentId,
      };
      commentMail(params).then((res) => {
        if (res.success) {
          this.commentList.unshift(res.obj);
          this.hfrName = '';
          this.hfrId = '';
          this.parentId = '';
          this.commentFiles = [];
          this.$refs.inputModal.isShowModal = false;
          // this.$emit('newComment');
        }
      });
    },
    // 回复评论
    replyComment(em) {
      this.hfrName = em.plr;
      this.hfrId = em.plrId;
      this.parentId = em.id;
      this.$refs.inputModal.isShowModal = true;
      setTimeout(() => {
        this.$refs.inputModal.commentEditor && this.$refs.inputModal.commentEditor.execCommand('insertHtml', `<span>@${this.hfrName}</span> `);
      }, 500);
    },
    // 删除评论
    deleteComment(em, index) {
      const that = this;
      JE.confirm(that.langLocal.messagesOne, (btn) => {
        if (btn == 'ok') {
          deleteComment({ id: em.id }).then((res) => {
            if (res.success) {
              that.commentList.splice(index, 1);
              // this.$emit('newComment');
            }
          });
        }
      });
    },
    // 删除附件
    deleteFile(item, index) {
      this.commentFiles.splice(index, 1);
    },

    downloadFile(item) {
      JE.File.doAct('download', '', '', item.pathKey, item.name);
    },
    previewFile(item) {
      JE.File.doAct('preview', '', '', item.pathKey, item.name);
    },

  },
};
</script>
<style lang="scss">
#mailDetail {
  overflow: inherit;
}
.mailDetail {
  height: 100%;
  .el-dialog__header {
    padding: 20px;
  }
  .el-dialog__body {
    overflow-y: auto;
    padding: 0 30px;
    padding-bottom: 5px;
    .box-card {
      border: 0;
      .el-card__header {
        border-bottom: 0;
        font-size: 16px;
        font-weight: 600;
        color: #444;
        padding-right: 90px;
        padding-left: 0;
        position: relative;
        padding-bottom: 10px;
        .floatBtns {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          .el-button--text {
            color: #b0b0b0;
            font-size: 15px;
            &:hover {
              color: #409eff;
            }
          }
        }
        .editBtn {
          color: #999;
          &:hover .jeicon-more {
            color: #409eff;
          }
        }
      }
      .el-card__body {
        padding: 0;
        .gatherInfo {
          overflow: hidden;
          .basicInfo {
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .time {
              color: #b0b0b0;
            }
          }
          .openBtn {
            float: right;
            .el-button--text {
              color: #376ace;
              i {
                font-size: 14px;
              }
              &:hover {
                color: #409eff;
              }
            }
          }
        }
        .card-item {
          overflow: hidden;
          font-size: 14px;
          padding: 0 0 10px 0;
          .item-label {
            float: left;
            color: #a9aba9;
            font-weight: 400;
          }
          .item-note {
            color: #444;
            font-weight: 500;
            padding-left: 20px;
            white-space: nowrap;
            position: relative;
            .moreBtn {
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              color: #999;
              i {
                font-size: 14px;
              }
              &:hover .jeicon-more {
                color: #409eff;
              }
            }
            .hideBtn {
              position: absolute;
              right: 40px;
              top: 50%;
              transform: translateY(-50%);
              color: #376ace;
              i {
                font-size: 14px;
              }
              &:hover {
                color: #409eff;
              }
            }
          }
        }
      }
    }
    .mail-cnt {
      min-height: 160px;
      border-top: 1px solid rgba(236, 236, 236, 1);
      padding: 20px;
      margin-top: 10px;
      position: relative;
    }
    .module-mail{
      height: 50px;
      .moduleName{
        padding: 0 8px;
        height:24px;
        text-align: center;
        line-height: 24px;
        background:rgba(224,239,255,1);
        border-radius:12px;
        cursor: pointer;
        &:hover{
          background:rgba(224,239,255,.7);
        }
      }
    }
    .file-list {
      .file-title {
        height: 50px;
        background: #fbfafa;
        line-height: 50px;
        color: #444;
        .jeicon {
          color: #ff6f45;
          margin-right: 10px;
        }
      }
      .file-item {
        padding-top: 10px;
        font-size: 14px;
        overflow: hidden;
        .slImg {
          font-size: 16px;
        }
        .fileName {
          float: left;
          padding-left: 10px;
        }
        .handleIcon {
          float: left;
          padding-left: 30px;
          .el-button--text {
            padding: 4px 20px;
          }
        }
      }
      .file-item:last-child {
        padding-bottom: 10px;
      }
    }

    .footerBox {
      height: 50px;
      line-height: 50px;
      text-align: right;
      color: #376ace;
      font-size: 15px;
      font-weight: 400;
      padding-right: 22px;
      span {
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
    }

    .sendBtn {
      text-align: right;
      .el-button--primary {
        background-color: #386ad0;
        border-color: #386ad0;
      }
      .el-button--primary:hover {
        background-color: #409eff;
        border-color: #409eff;
      }
    }
    .commnetTitle {
      border-top: 1px solid #ececec;
      position: relative;
      height: 40px;
      line-height: 40px;
      .verticalBar {
        display: inline-block;
        width: 5px;
        height: 17px;
        background: #f74;
        margin-right: 10px;
      }
    }
    .comment-list {
      padding: 12px 0;
    }
  }
  .el-dialog__footer {
    text-align: center;
    background-color: #fbfbfb;
    padding: 0 15px;
    line-height: 50px;
    font-size: 16px;
    color: #b0b0b0;
    border-top: 2px solid #e9e9e9;
    cursor: pointer;
    &:hover {
      color: #409eff;
      background-color: #e9e9e9;
    }
  }
}
</style>
